<template>
  <el-input
    placeholder="用户名"
    class="search"
    v-model="username"
    suffix-icon="el-icon-search"
  ></el-input>
  <el-select class="search" v-model="role_id" placeholder="请选择角色">
    <el-option
      v-for="(item, index) in role"
      :key="index"
      :label="item.roleName"
      :value="item.roleId"
    ></el-option>
  </el-select>
  <el-button type="primary" icon="el-icon-search" @click="search">
    查询
  </el-button>
  <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
  <!-- <el-button type="success">新增</el-button> -->
  <br />
  <el-button type="danger" icon="el-icon-delete" @click="deleterows">
    批量删除
  </el-button>
  <br />
  <br />
  <el-table
    @selection-change="handleSelectionChange"
    :data="user.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    height="530"
    style="width: 100%"
  >
    <el-table-column align="center" type="selection"></el-table-column>
    <el-table-column align="center" label="头像" width="150">
      <template #default="scope">
        <img
          :src="scope.row.avatar"
          alt=""
          style="height: 100px; width: auto"
        />
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="userId"
      label="用户ID"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="nickname"
      min-width="100"
      label="昵称"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="role.roleName"
      label="权限"
      width="100"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="username"
      label="用户名"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="realName"
      label="真实姓名"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="idCardType"
      label="证件类型"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="idCard"
      min-width="170"
      label="证件号码"
    ></el-table-column>
    <el-table-column align="center" label="证件正面照" width="220">
      <template #default="scope">
        <img
          :src="scope.row.idCardFront"
          @click="magnify(scope.row.idCardFront)"
          alt=""
          style="height: 100px; width: auto"
        />
      </template>
    </el-table-column>
    <el-table-column align="center" label="证件背面照" width="250">
      <template #default="scope">
        <img
          :src="scope.row.idCardBack"
          @click="magnify(scope.row.idCardBack)"
          alt=""
          style="height: 100px; width: auto"
        />
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="email"
      label="邮箱"
      width="140"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="phone"
      label="手机号"
      width="140"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="bankId"
      label="银行id"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="createDate"
      label="创建时间"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="updateDate"
      label="更新时间"
    ></el-table-column>
    <el-table-column align="center" label="状态" width="100">
      <template #default="scope">
        <el-button v-if="scope.row.isDelete == 0" type="success" size="small">
          已启用
        </el-button>
        <el-button v-else type="danger" size="small">已禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" fixed="right" label="操作" min-width="250">
      <template #default="scope">
        <el-popconfirm hide-icon="true" :title="checkData">
          <template #reference>
            <el-button
              size="small"
              icon="el-icon-view"
              type="info"
              @click="check(scope.row)"
            ></el-button>
          </template>
        </el-popconfirm>
        <el-button
          size="small"
          icon="el-icon-edit"
          type="warning"
          @click="editrow(scope.row)"
        ></el-button>
        <el-button
          size="small"
          v-if="scope.row.isDelete == 0"
          icon="el-icon-delete"
          type="danger"
          @click="deleterow(scope.row)"
        ></el-button>
        <el-button
          size="small"
          v-else
          icon="el-icon-delete"
          type="danger"
          disabled
          @click="deleterow(scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 30]"
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="user.length"
  />
  <el-dialog v-model="dialogFormVisible" title="修改用户" :width="450">
    <el-form style="padding: 20px">
      <el-form-item label="用户名" label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.username" />
      </el-form-item>
      <el-form-item label="邮&emsp;箱" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.email" />
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.phone" />
      </el-form-item>
      <el-form-item label="角&emsp;色" :label-width="formLabelWidth">
        <el-select
          style="width: 316px"
          class="search"
          v-model="rowdata.role.roleId"
          placeholder="请选择角色"
        >
          <el-option
            v-for="(item, index) in role"
            :key="index"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状&emsp;态" :label-width="formLabelWidth">
        <el-radio-group v-model="rowdata.isDelete">
          <el-radio :label="0">有效</el-radio>
          <el-radio :label="1">锁定</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saverow()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="imageVisible">
    <img :src="src" alt="" style="width: 100%" />
  </el-dialog>
</template>
<script setup>
import { getUser, getRole, deleteUser, deleteUsers, saveUser } from '@/api/role'
import { onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const userList = ref()
const imageVisible = ref(false)
const dialogFormVisible = ref(false)
var src = ref()
const checkData = ref('')
var pageSize = ref(5)
var currentPage = ref(1)
var user = ref([])
var role = ref([])
var rowdata = ref([])
var username = ref()
var role_id = ref()
var result = ref(false)
const handleSelectionChange = val => {
  userList.value = val.map(item => item.userId)
}
onMounted(async () => {
  user.value = (await getUser(username.value, role_id.value)).data
  role.value = (await getRole()).data
  console.log(user.value)
})
function check(row) {
  checkData.value =
    '用户ID：' +
    row.userId +
    '\n昵称：' +
    row.nickname +
    '\n用户名：' +
    row.username +
    '\n真实姓名：' +
    row.realName +
    '\n证件类型：' +
    row.idCardType +
    '\n证件号码：' +
    row.idCard +
    '\n邮箱：' +
    row.email +
    '\n手机号：' +
    row.phone +
    '\n性别：' +
    (row.sex == 0 ? ' 男' : ' 女') +
    '\n创建日期：' +
    row.creatDate +
    '\n更新日期：' +
    row.updateDate +
    '\n状态：' +
    (row.isDelete == 0 ? ' 正常' : ' 删除') +
    '\n最后登录时间：' +
    row.lastLoginTime
}
function editrow(row) {
  rowdata.value = row
  dialogFormVisible.value = true
}
function magnify(img) {
  imageVisible.value = true
  src.value = img
}
async function saverow() {
  dialogFormVisible.value = false
  result.value = (
    await saveUser(JSON.stringify(rowdata.value), rowdata.value.role.roleId)
  ).data
  if (result.value) {
    ElMessage({
      type: 'success',
      message: '保存成功',
    })
    location.reload()
  } else {
    ElMessage({
      type: 'error',
      message: '保存失败',
      duration: 500,
      onClose: () => {
        location.reload()
      },
    })
  }
}
async function deleterow(row) {
  ElMessageBox.confirm('确定要删除用户' + row.username + '吗？', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    result.value = (await deleteUser(row.userId)).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
async function deleterows() {
  ElMessageBox.confirm('确定要批量删除选中用户吗？', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    result.value = (await deleteUsers(userList.value)).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
async function search() {
  user.value = (await getUser(username.value, role_id.value)).data
}
function reset() {
  username.value = null
  role_id.value = null
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
.el-popconfirm__main {
  white-space: pre-line;
  padding: 10px;
}
</style>
